<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<style>
    .mxnW{
        width: 80%;
        margin: 0 auto;
        margin-top: 20px;
    }
</style>
<body>
<form class="layui-form mxnW" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">头像上传</label>
        <div class="layui-input-block">
            <input type="file"  name="picture" class="layui-upload-file">
            <img id="setImg" style="width: 60px;height: auto" src="" alt="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" >用户昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="title" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" id="username">邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="username" disabled required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
        <!--<div class="layui-form-mid layui-word-aux">这邮箱已经验证</div>-->
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
            <select name="age" lay-verify="required">
                <option value=""></option>
                <option value="3">襁褓</option>
                <option value="5">熊孩子</option>
                <option value="18">青春年华</option>
                <option value="30">而立之年</option>
                <option value="40">不惑之年</option>
                <option value="50">年逾半百</option>
                <option value="60">杖乡之年</option>
                <option value="80">杖朝之年</option>
            </select>
        </div>
    </div>
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">复选框</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="radio" name="like[write]" title="写作">-->
            <!--<input type="radio" name="like[read]" title="阅读" checked>-->
            <!--<input type="radio" name="like[dai]" title="发呆">-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">权限开关</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="checkbox" name="switch" lay-skin="switch">-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="男">
            <input type="radio" name="sex" value="1" title="女" >
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-block">
            <textarea name="signature" placeholder="请输入个性签名内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-block">
            <textarea name="abstract" placeholder="请输入简介内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </div>
</form>
<script src="../../public/js/jquery.min.js"></script>
<script src="./layui/layui.js"></script>
<script>
    //Demo
    var tpl={
        data:JSON.parse(sessionStorage.user),
        setData:function () {

            $("#setImg").attr("src",this.data.picture||"");
            $("input[name='title']").val(this.data.title||"");
            if(this.data.email){
                $("input[name='username']").attr("name",'email');
                $("input[name='email']").val(this.data.email||"");
            }else{
                $("#username").html("手机号")
                $("input[name='username']").attr("name",'phone');
                $("input[name='phone']").val(this.data.phone||"");
            }
            $("select[name='age']").val(this.data.age||"");
            var ans=$("input[name='sex']");
            for(var i=0;i<ans.length;i++){
                if(ans[i].value==this.data.sex){
                    ans[i].checked=true;
                }
            }
            $("textarea[name='signature']").val(this.data.signature||"");
            $("textarea[name='abstract']").val(this.data.abstract||"");
        },
        getData:function () {
            return {
                userid:this.data.userid
                , picture:$("#setImg").attr("src")
            }
        }
    }
    tpl.setData();

    layui.use('form', function(tpl){
        var form = layui.form();
        //监听提交
        form.on('submit(formDemo)', function(data){
           if($("#setImg").attr("src")){
               data.field.picture=$("#setImg").attr("src");
           }else{
               delete data.field.picture;
           }
           data.field.userid= JSON.parse(sessionStorage.user).userid;
           $.ajax({
               type: 'POST',
               url:"/user/update",
               data: {data:data.field},
               success:function (data) {
                    if(data.msg.type==1){
                        layer.msg(data.msg.data);
                    }
                       $.ajax({
                           type: 'POST',
                           url:"/user/detail",
                           data: {data:{userid:JSON.parse(sessionStorage.user).userid}},
                           success:function (data) {
                               sessionStorage.setItem("user",JSON.stringify(data.result));
                           } ,
                           error:function () {
                               layer.msg("系统错误")
                           }
                       })
               } ,
               error:function () {
                   layer.msg("系统错误")
               }
              })

            return false;
        });
    });
    layui.use('upload', function(){
        layui.upload({
            url: '/ueditor/ue?action=uploadimage'
            ,success: function(res){
                console.log(res); //上传成功返回值，必须为json格式
                if(res.state=="SUCCESS"){
                    layer.msg('上传成功')
                    $("#setImg").attr("src",location.origin+res.url)
                }else{
                    layer.msg('上传失败')
                }
            }
        });
    });

</script>
</body>
</html>